<template>
  <view class="page-container">
    <!-- 页面内容容器 -->
    <view class="content-container">
      <!-- 课程页面 -->
      <view v-if="currentTab === 0" class="tab-content">
        <HomeComponent :refreshIndex="refreshIndex" />
      </view>
      
      <!-- 复习页面 -->
      <view v-if="currentTab === 1" class="tab-content">
        <LeanComponent />
      </view>
      
      <!-- 我的页面 -->
      <view v-if="currentTab === 2" class="tab-content">
        <MeComponent />
      </view>
    </view>
    
    <!-- 自定义底部导航栏 -->
    <view class="custom-nav-bar">
      <view 
        class="nav-item" 
        :class="{ 'nav-item-active': currentTab === 0 }"
        @click="switchTab(0)"
      >
        <image 
          class="nav-icon" 
          :src="currentTab === 0 ? '/static/images/nav-home-ed.png' : '/static/images/nav-home.png'"
        />
        <text class="nav-text" :class="{ 'nav-text-active': currentTab === 0 }">课程</text>
      </view>
      
      <!-- <view 
        class="nav-item" 
        :class="{ 'nav-item-active': currentTab === 1 }"
        @click="switchTab(1)"
      >
        <image 
          class="nav-icon" 
          :src="currentTab === 1 ? '/static/images/nav-lean-ed.png' : '/static/images/nav-lean.png'"
        />
        <text class="nav-text" :class="{ 'nav-text-active': currentTab === 1 }">复习</text>
      </view> -->
      
      <view 
        class="nav-item" 
        :class="{ 'nav-item-active': currentTab === 2 }"
        @click="switchTab(2)"
      >
        <image 
          class="nav-icon" 
          :src="currentTab === 2 ? '/static/images/nav-me-ed.png' : '/static/images/nav-me.png'"
        />
        <text class="nav-text" :class="{ 'nav-text-active': currentTab === 2 }">我的</text>
      </view>
    </view>
  </view>
</template>

<script >
import HomeComponent from './home.vue'
import LeanComponent from './lean.vue'
import MeComponent from './me.vue'

export default {
  components: {
    HomeComponent,
    LeanComponent,
    MeComponent
  },
  data() {
    return {
      currentTab: 0 ,// 当前选中的标签页索引
      refreshIndex: 1, // 刷新数据
    }
  },
  onShow() {
    this.refreshIndex += 1
  },
  methods: {
    switchTab(index) {
      this.currentTab = index
    }
  }
}
</script>

<style lang="scss">
.page-container {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: #F6F7FB;
}

.content-container {
  flex: 1;
  width: 100%;
  overflow: hidden;
}

.tab-content {
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
}

/* 自定义底部导航栏样式 */
.custom-nav-bar {
  width: calc(100% - 64rpx); /* 左右间距16px */
  height: 128rpx;
  margin: 0 32rpx 32rpx 32rpx; /* 底部间距16px */
  border-radius: 1200rpx;
  background: white;
  border: 1px solid #EBEDEF;
  padding: 8rpx 6rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: row;
}

.nav-item {
  flex: 1;
  height: 112rpx;
  border-radius: 1200rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: background-color 0.3s ease;
}

.nav-item-active {
  background-color: #E6EDFF;
}

.nav-icon {
  width: 48rpx;
  height: 48rpx;
  margin-bottom: 9rpx;
}

.nav-text {
  font-size: 20rpx;
  color: #666666;
  transition: color 0.3s ease;
}

.nav-text-active {
  color: #155BD4;
}
</style>
